<template>
    <el-row>
        <el-row class="hotelWapper" v-if="hotelList.length > 0"
            v-loading="loading"
            element-loading-text="拼命加载中" 
            element-loading-spinner="el-icon-loading"
            >
            <el-row type="flex" justify="space-between" class="hotel-item" v-for="(item,index) in hotelList" :key="index">
                <el-row class="pic">
                    <img :src="item.photos" alt="">
                </el-row>
                <el-row class="desc" type="flex" justify="space-between">
                    <el-row class="hotel-desc">
                        <h1 @click="$router.push('/hotel/'+item.id+'.html')">{{item.name}}</h1>
                        <el-row class="eng">
                            {{item.alias}}
                            <span class="type">
                                <i class="iconfont iconhuangguan"></i>
                                <i class="iconfont iconhuangguan"></i>
                                <i class="iconfont iconhuangguan"></i>
                                <b>经济型</b>
                            </span>
                        </el-row>
                        <el-row class="evaluate">
                            <el-rate :value="item.stars" disabled></el-rate>
                            <b>{{item.stars}}分</b>
                            <span><em>{{item.ranComment}}</em>条评价</span>
                            <span><em>{{item.ranTravels}}</em>篇游记</span>
                        </el-row>
                        <el-row class="location">
                            <i class="el-icon-location"></i>位于: {{item.address}}
                        </el-row>
                    </el-row>
                    <el-row class="link" v-if="item.products">
                        <el-row class="hotel-link" type="flex" justify="space-between"
                        v-for="(it,index) in item.products"
                        :key="index"
                        >
                            <span>{{it.name}}</span>
                            <em>
                                <b>￥{{it.price}}</b>起
                                <i class="el-icon-arrow-right"></i>
                            </em>
                        </el-row>
                    </el-row>
                </el-row>
            </el-row>
        </el-row>
        <el-row class="no-content" v-if="hotelList.length <= 0">暂无数据~~</el-row>
    </el-row>
</template>

<script>
export default {
    props:{
        hotelList:{
            type:Array,
            default(){
                return []
            }
        },
        loading:Boolean
    }
}
</script>

<style lang="less" scoped>
.hotelWapper{
    .hotel-item{
        display: flex;
        padding:24px 0;
        border-bottom: 1px solid #EEEEEE;
        .pic{
            width: 380px;
            height: 200px;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .desc{
            width:100%;
            padding-left: 20px;
            .hotel-desc{
                padding:5px 0;
                h1{
                font-size: 24px;
                font-weight: 400;
                cursor: pointer;
                }
                .eng{
                    font-size: 14px;
                    color: #999999;
                    .type{
                        color: #FF9300;
                        b{
                            font-weight: 400;
                            color: #999999;
                        }
                    }
                }
                .evaluate{
                    display: flex;
                    justify-content: flex-start;
                    margin:14px 0 20px;
                    b{
                        font-weight: 400;
                        font-size: 16px;
                        color: #FF9300;
                    }
                    span{
                        margin-left: 50px;
                        font-size:16px;
                        color: #000;
                        em{
                          color: #FF9300;
                          font-style: normal;
                          margin-right: 5px;
                        }
                    }
                }
                .location{
                    font-size: 14px;
                    color: #666666;
                    i{
                        font-size: 18px;
                    }
                }
            }
            .link{
                margin-top: 25px;
                width:234px;
                .hotel-link{
                    width:100%;
                    height: 46px;
                    line-height: 46px;
                    font-size: 14px;
                    color: #5F6266;
                    border-bottom: 1px solid #EAEEF5;
                    &:hover{
                        
                    }
                    span{
                      padding-left: 15px;
                    }
                    em{
                      padding-right: 15px;
                      font-style: normal;
                        b{
                            color: #FF9300;
                            font-weight: 400;
                            font-size: 18px;
                        }
                        i{

                        }
                    }
                }
            }
        }
    }
}
.no-content{
    text-align: center;
    font-size: 14px;
    color: #c0c0c0;
    padding:20px 0;
}
</style>